<template>
<div>
  <div class="Container">
      <el-carousel indicator-position="none" height="480px" class="carousel">
        <el-carousel-item class="carItem" v-for="(carousel,index) in carouselList" :key="carousel.carousel_id">
          <img :src="carousel.imgPath">
        </el-carousel-item>
      </el-carousel>
   </div>
   <List :data="homePhone" title="手机"/>
   <List :data="homeTV" title="家电"/> 
   <List :data="homeParts" title="配件"/>  
</div>
   
</template>

<script>
import { mapState} from "vuex"
import List from '../../components/List/List.vue'
export default {
  name:'home',
  components:{List},
  created(){
    this.getCarousel()
  },
  methods:{
  getCarousel(){
    // 获取轮播图数据
    this.$store.dispatch("getCarousel")
    // 获取手机数据
    this.$store.dispatch("getHomePhoneData")
    // 获取家电数据
    this.$store.dispatch("getHomeTVdata")
    // 获取配件数据
    this.$store.dispatch("getHomePartsdata")
  }
  },
  computed:{
    ...mapState({
      carouselList:state=>state.home.carouselList,
      homePhone:state=>state.home.homePhone,
      homeTV:state=>state.home.homeTV,
      homeParts:state=>state.home.homeParts
    })
  }
}
</script>

<style scoped >
.Container{
  padding-top: 20px;
  width: 1220px;
  line-height: 480px;
  margin: auto;
  
}
.carousel{
  width: 100%;
  margin: 0 auto;
}
img{
  display: block;
  width: 100%;
  
}
</style>